<template>
    <div class="stats-container">
      <h2 class="title">总体统计分析</h2>
      
      <div class="overall-stats">
        <div class="stat-card">
          <div class="stat-value">67分</div>
          <div class="stat-label">平均分</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">90分</div>
          <div class="stat-label">最高分</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">23分</div>
          <div class="stat-label">最低分</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">65%</div>
          <div class="stat-label">及格率</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">89%</div>
          <div class="stat-label">参与率</div>
        </div>
      </div>
      
      <h2 class="title">各分数段统计分析</h2>
      
      <div class="charts-container">
        <div class="chart-wrapper">
          <div id="score-distribution-chart" class="chart"></div>
        </div>
        <div class="chart-wrapper">
          <div id="score-ranking-chart" class="chart"></div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    data() {
      return {
        scoreDistributionChart: null,
        scoreRankingChart: null
      };
    },
    mounted() {
      this.initCharts();
    },
    methods: {
      initCharts() {
        // 分数分布柱状图
        this.scoreDistributionChart = echarts.init(document.getElementById('score-distribution-chart'));
        this.scoreDistributionChart.setOption({
            title: {
          text: '各分数段人数分布',
          left: 'center',
          textStyle: {
            fontSize: 16,
            fontWeight: 'bold',
            color: '#333'
          }
        },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['95分以上', '90-95分', '85-90分', '80-85分', '75-80分', '70-75分', '65-70分', '60分以下'],
            axisLabel: {
              interval: 0,
              rotate: 45
            }
          },
          yAxis: {
            type: 'value',
            name: '百分比',
            max: 25,
            interval: 5
          },
          series: [{
            name: '百分比',
            type: 'bar',
            data: [10, 15, 10, 15, 25, 10, 10, 5],
            itemStyle: {
              color: function(params) {
                const colorList = ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4'];
                return colorList[params.dataIndex];
              }
            },
            label: {
              show: true,
              position: 'top',
              formatter: '{c}%'
            }
          }]
        });
        
        // 分数排名饼图
        this.scoreRankingChart = echarts.init(document.getElementById('score-ranking-chart'));
        this.scoreRankingChart.setOption({
            title: {
          text: '各分数段排名',
          left: 'center',
          textStyle: {
            fontSize: 16,
            fontWeight: 'bold',
            color: '#333'
          }
        },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}% ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: 10,
            top: 'center',
            data: ['75-80分', '90-95分', '85-90分', '95分以上', '65-70分', '70-75分', '60分以下']
          },
          series: [
            {
              name: '各分数段排名',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '18',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 25, name: '75-80分' },
                { value: 15, name: '90-95分' },
                { value: 10, name: '85-90分' },
                { value: 10, name: '95分以上' },
                { value: 10, name: '65-70分' },
                { value: 10, name: '70-75分' },
                { value: 10, name: '60分以下' }
              ]
            }
          ]
        });
      }
    },
    beforeDestroy() {
      if (this.scoreDistributionChart) {
        this.scoreDistributionChart.dispose();
      }
      if (this.scoreRankingChart) {
        this.scoreRankingChart.dispose();
      }
    }
  };
  </script>
  
  <style scoped>
  .stats-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100vh;
  }
  
  .title {
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  
  .overall-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    flex-wrap: wrap;
  }
  
  .stat-card {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 15%;
    margin-bottom: 20px;
  }
  
  .stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #409EFF;
    margin-bottom: 10px;
  }
  
  .stat-label {
    font-size: 14px;
    color: #909399;
  }
  
  .charts-container {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
  
  .chart-wrapper {
    width: 48%;
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  
  .chart {
    width: 100%;
    height: 400px;
  }
  
  @media (max-width: 768px) {
    .overall-stats {
      flex-direction: column;
    }
    
    .stat-card {
      width: 100%;
      margin-bottom: 15px;
    }
    
    .charts-container {
      flex-direction: column;
    }
    
    .chart-wrapper {
      width: 100%;
      margin-bottom: 20px;
    }
  }
  </style>